<template>
  <PerfectTableComponent
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :removeQueryField="removeQueryField"
    :clearQuery="clearQuery"
    v-model:query="query"
    title="车型"
    ref="tableRef"
    :queryFormHeaders="queryFormHeaders"
    :table="table"
    :tableColumns="tableColumns"
    :showTableIndex="false"
    :operatorColumnWidth="300"
    :baseUrl="urls.API_URL_BACKSTAGE_MES_CARMODEL"
    v-model:form="form"
    :formHeader="formHeader"
    formLabelWidth="120px"
    @beforeAddRow="beforeAddRow"
    @afterLoadDataSuccessInEditRow="afterLoadDataSuccessInEditRow"
    @beforeFormSubmit="beforeFormSubmit"
  >
    <!-----------------------------表格自定义列1----------------------------------------->
    <!--所属栏目-->
    <template #table_column_carBrandName="scope: any">
      {{ scope.row.carBrand != null ? scope.row.carBrand.name : '' }}
    </template>
  </PerfectTableComponent>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import { onMounted, provide, reactive, ref } from 'vue';
import useTableList from '@/api/hooks/useTableList';
import type { FormHeader, ResponseData, TableColumn } from '@/types/interface/base_interface';
import urls from '@/api/request/urls';
import { getDict } from '@/api/dict';
import type { CarModel } from '@/types/interface/mes_interface';
import Request from '@/api/request/request';

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(urls.API_URL_BACKSTAGE_MES_CARMODEL);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([]);

//表格==========================================================
// 表格插件ref对象
const tableRef = ref();

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([]);

//表单==========================================================
//表单对象
const form = ref<CarModel>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);

const getCarBrand = async () => {
  const resData: any = await new Request(urls.API_URL_BACKSTAGE_MES_CARBRAND + '/all').get();
  if (resData.success) {
    return resData.data;
  }
};
onMounted(async () => {
  //获取物料类别列表
  const carBrands = await getCarBrand();
  //定义优先级选项。放在mounted中执行时，要将引用改变量的属性也放进来。
  const enabledDict = await getDict('启用状态', 'boolean');
  //汽车类型
  const carTypeDict = await getDict('汽车类型', 'string');
  //汽车能源类型
  const energyTypeDict = await getDict('汽车能源类型', 'string');
  //汽车类型
  const sizeTypeDict = await getDict('汽车大小类型', 'string');
  //汽车停产状态
  const carStopProductionDict = await getDict('汽车生产状态', 'boolean');
  queryFormHeaders.value = [
    // 查询表单
    {
      prop: 'name',
      label: '名称'
    },
    {
      prop: 'carBrandId',
      propAsName: 'carBrand.id',
      label: '汽车品牌',
      type: 'selectObject',
      list: carBrands,
      config: {
        valueKey: 'id',
        defaultProp: {
          value: 'id',
          label: 'name'
        }
      }
    },
    {
      prop: 'type',
      label: '汽车类型',
      type: 'select',
      list: carTypeDict
    },
    {
      prop: 'energyType',
      label: '汽车能源类型',
      type: 'select',
      list: energyTypeDict
    },
    {
      prop: 'sizeType',
      label: '汽车大小类型',
      type: 'select',
      list: sizeTypeDict
    },
    {
      prop: 'stopProduction',
      label: '生产状态',
      type: 'select',
      list: carStopProductionDict
    },
    {
      prop: 'enabled',
      label: '是否启用',
      type: 'select',
      list: enabledDict
    }
  ];
  //表格对象
  tableColumns.value = [
    {
      label: '名称',
      prop: 'name',
      fixed: true,
      width: 150
    },
    {
      label: '汽车品牌',
      prop: 'carBrandName',
      type: 'custom',
      width: 100
    },
    {
      label: '汽车类型',
      prop: 'type',
      width: 100,
      type: 'dict',
      dict: carTypeDict
    },
    {
      label: '汽车能源类型',
      prop: 'energyType',
      width: 100,
      type: 'dict',
      dict: energyTypeDict
    },
    {
      label: '汽车大小类型',
      prop: 'sizeType',
      width: 100,
      type: 'dict',
      dict: sizeTypeDict
    },
    {
      label: '生产状态',
      prop: 'stopProduction',
      width: 100,
      type: 'dict',
      dict: carStopProductionDict
    },
    {
      label: '启用状态',
      prop: 'enabled',
      width: 100,
      type: 'dict',
      dict: enabledDict,
      config: {
        dictTag: {
          primary: [true],
          danger: [false]
        }
      }
    },
    {
      label: '配置数',
      prop: 'carModelConfigNumber',
      width: 100
    },
    {
      label: '创建时间',
      prop: 'createTime',
      width: 180
    },
    {
      label: '最后编辑时间',
      prop: 'updateTime',
      width: 180
    }
  ];
  // 添加编辑表单
  formHeader.value = [
    {
      prop: 'carBrandId',
      label: '汽车品牌',
      type: 'selectObject',
      list: carBrands,
      config: {
        valueKey: 'id',
        defaultProp: {
          value: 'id',
          label: 'name'
        }
      },
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '名称',
      prop: 'name',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 60,
          message: '长度在 1 到 60个字符',
          trigger: 'blur'
        }
      ]
    },
    {
      prop: 'type',
      label: '汽车类型',
      type: 'select',
      list: carTypeDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      prop: 'energyType',
      label: '汽车能源类型',
      type: 'select',
      list: energyTypeDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      prop: 'sizeType',
      label: '汽车大小类型',
      type: 'select',
      list: sizeTypeDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '生产状态',
      prop: 'stopProduction',
      type: 'select',
      list: carStopProductionDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '是否启用',
      prop: 'enabled',
      type: 'switch',
      list: enabledDict,
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    }
  ];
});
//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    stopProduction: false,
    enabled: true
  };
};
//在编辑行读取后端记录后需要修改的地方
const afterLoadDataSuccessInEditRow = async (formEdit: CarModel) => {
  //重新封装表单对象的值
  if (formEdit.carBrand != null) {
    formEdit.carBrandId = formEdit.carBrand.id;
  }
};
//在表单提交前对对象进行封装
const beforeFormSubmit = () => {
  console.log(form.value.carBrandId);
  if (form.value.carBrandId != null) {
    form.value.carBrand = {
      id: form.value.carBrandId
    };
  }
};
</script>

<style scoped></style>
